<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div id="main" style="width: 600px; height: 400px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import _ from "lodash"
// import 'echarts/lib/chart/line'
// import 'echarts/lib/component/polar'

export default {
	data() {
		return {
			options: {
				title: {
					text: "用户来源"
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						label: {
							backgroundColor: "#E9EEF3"
						}
					}
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: [
					{
						boundaryGap: false
					}
				],
				yAxis: [
					{
						type: "value"
					}
				]
			}
		};
	},
	created() {},
	async mounted() {
		var myChart = echarts.init(document.getElementById("main"));

		const { data: res } = await this.$http.get("reports/type/1");
		if (res.meta.status !== 200) {
			this.$message.error("获取折线图数据失败");
		}

		var option = {
			title: {
				text: "ECharts 入门示例"
			},
			tooltip: {},
			legend: {
				data: ["销量"]
			},
			xAxis: {
				data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			},
			yAxis: {},
			series: [
				{
					name: "销量",
					type: "bar",
					data: [5, 20, 36, 10, 10, 20]
				}
			]
		};
		const result=_.merge(res.data, this.options)
		myChart.setOption(result);
	},
	methods: {}
};
</script>

<style lang="less" scoped>
</style>